<template>
  <div class="head">
    <div class="left">
      <IsIcon :is-active="appStore.isHeadActive" @toggleSidebar="toggleSidebar" class="isIcon"></IsIcon>
      <Breadcrumb class="breadcrumb"></Breadcrumb>
    </div>
    <div class="right">
      <SettinIcon></SettinIcon>
      <UserInfo></UserInfo>
    </div>
  </div>
</template>

<script setup lang="ts">
import IsIcon from '@/layouts/Head/left/IsIcon.vue'
import Breadcrumb from '@/layouts/Head/left/Breadcrumb.vue'
import UserInfo from '@/layouts/Head/right/UserInfo.vue'
import SettinIcon from '@/layouts/Head/right/SettinIcon.vue'
import { useAppStore } from '@/stores';
const appStore = useAppStore()
const toggleSidebar = () => {
  appStore.handleSidebarStatus()
}
</script>

<style lang="scss" scoped>
.head {
  // width: 100%;
  height:$base-head-height;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // box-sizing: border-box;
  // padding: 0 15px;
  .left {
    flex: 1;
    display: flex;
    align-items: center;

    .isIcon {
      padding: 5;
      margin: 0 10px;
      cursor: pointer;

      .breadcrumb {
        flex: 1;
      }
    }
  }



  .right {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    margin-right: 20px;
    overflow: hidden;
  }
}
</style>
